<template>
  <div class="unitInfo-tableContainer">
    <div class="unitInfo-tableTitle">
      <h2>{{yearText}}临安区公共机构能源消耗申报汇总表(按单位)</h2>
      <span>
        【 汇总年份：
        <el-date-picker v-model="yearText" type="year" value-format="yyyy" placeholder="选择年" style="width:100px;" @change="getDetail()">
        </el-date-picker>&nbsp;&nbsp;&nbsp;
        <el-checkbox v-model="checked" @change="getDetail()">汇总至一级单位(含下属二级单位)</el-checkbox> 】 (
        <el-select v-model="department" placeholder="按一级单位上报查询" size='mini' @change="getDetail()">
          <el-option v-for="item in departmentData" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>)
      </span>
    </div>
    <div class="unitInfo-tableContent">
      <table width="100%" border="1" cellpadding="10">
        <tr>
          <td align="center" valign="middle" width="60">序号</td>
          <td align="center" valign="middle">单位</td>
          <td align="center" valign="middle">水量<br/>(吨)</td>
          <td align="center" valign="middle">水费<br/>(元)</td>
          <td align="center" valign="middle">电量<br/>(千瓦时)</td>
          <td align="center" valign="middle">电费<br/>(元)</td>
          <td align="center" valign="middle">燃煤量<br/>(吨)</td>
          <td align="center" valign="middle">燃煤费<br/>(元)</td>
          <td align="center" valign="middle">汽油量<br/>(升)</td>
          <td align="center" valign="middle">汽油费<br/>(元)</td>
          <td align="center" valign="middle">柴油量<br/>(升)</td>
          <td align="center" valign="middle">柴油费<br/>(元)</td>
          <td align="center" valign="middle">汽油车数量<br/>(辆)</td>
          <td align="center" valign="middle">柴油车数量<br/>(辆)</td>
          <td align="center" valign="middle">新能源车数量<br/>(辆)</td>
          <td align="center" valign="middle">建筑面积<br/>(平方米)</td>
          <td align="center" valign="middle">用能人数</td>
          <td align="center" valign="middle">编制人数</td>
          <td align="center" valign="middle">公里数</td>
          <td align="center" valign="middle">单位面积电耗</td>
          <td align="center" valign="middle">人均电耗</td>
          <td align="center" valign="middle">人均水耗</td>
          <td align="center" valign="middle">百公里油耗</td>
        </tr>
        <tr :key="index" v-for="(item ,index) in energyData">
          <td align="center" valign="middle">{{index+1}}</td>
          <td align="center" valign="middle">{{item.DepartmentName}}</td>
          <td align="center" valign="middle">{{item.WaterTotal||0}}</td>
          <td align="center" valign="middle">{{item.WaterAmount||0}}</td>
          <td align="center" valign="middle">{{item.ElectricityTotal||0}}</td>
          <td align="center" valign="middle">{{item.ElectricityAmount||0}}</td>
          <td align="center" valign="middle">{{item.CoalTotal||0}}</td>
          <td align="center" valign="middle">{{item.CoalAmount||0}}</td>
          <td align="center" valign="middle">{{item.GasolineTotal||0}}</td>
          <td align="center" valign="middle">{{item.GasolineAmount||0}}</td>
          <td align="center" valign="middle">{{item.DieselTotal||0}}</td>
          <td align="center" valign="middle">{{item.DieselAmount||0}}</td>
          <td align="center" valign="middle">{{item.CarGasolineCount||0}}</td>
          <td align="center" valign="middle">{{item.CarDieselCount||0}}</td>
          <td align="center" valign="middle">{{item.CarNewEnergyCount||0}}</td>
          <td align="center" valign="middle">{{(item.TotalArea)||0}}</td>
          <td align="center" valign="middle">{{item.PeopleTotal||0}}</td>
          <td align="center" valign="middle">{{item.PeopleIn||0}}</td>
          <td align="center" valign="middle">{{item.CarKilometres||0}}</td>
          <td align="center" valign="middle">{{getAverage('TotalArea',item)}}</td>
          <td align="center" valign="middle">{{getAverage('ElectricityTotal',item)}}</td>
          <td align="center" valign="middle">{{getAverage('WaterTotal',item)}}</td>
          <td align="center" valign="middle">{{getAverage('GasolineTotal',item)}}</td>
        </tr>
        <tr v-if="energyData.length==0">
          <td align="center" colspan="20" valign="middle">暂无数据</td>
        </tr>
      </table>
    </div>
    <div class="table-button">
      <a class="downLoad" :href="exportUrl">导出</a>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        yearText: new Date().getFullYear() + '',
        checked: true,
        exportUrl: '',
        department: '',
        departmentData: ['所有一级单位'],
        energyData: []
      }
    },
    methods: {
      async getDetail() {
        this.exportUrl = `${this.baseUrl}/api/InstituionEnergy/statisticsByDepartment?year=${this.yearText}&includeChild=${this.checked}&export=true`
        this.energyData = []
        this.department = this.department == '所有一级单位' ? '' : this.department
        const result = await this.$get("/api/InstituionEnergy/statisticsByDepartment", {
          year: this.yearText,
          department: this.department,
          includeChild: this.checked
        })
        if (result.length > 0) {
          this.energyData = result
        }
      },
      getAverage(str, item) {
        if (str == 'TotalArea') {
          if (item.TotalArea) return (item.ElectricityTotal / item.TotalArea).toFixed(2)
          return 0
        } else if (str == 'GasolineTotal') {
          if (item.CarKilometres) return ((item.GasolineTotal / item.CarKilometres) * 100).toFixed(2)
          return 0
        } else {
          if (item.PeopleTotal) return ((item[str] / item.PeopleTotal) * 100).toFixed(2)
          return 0
        }
      },
      async getDepartmentNames() {
        const result = await this.$get('/api/User/getParents')
        this.departmentData = this.departmentData.concat(result)
      }
    },
    created() {
      this.showHome.isShow = false;
      this.exportUrl = `${this.baseUrl}/api/InstituionEnergy/statisticsByDepartment?year=${this.yearText}&includeChild=${this.checked}&export=true`
      this.getDetail()
      this.getDepartmentNames()
    }
  }

</script>
<style lang="scss" scoped>
  .unitInfo-tableContainer {
    width: 100%;
    padding: 20px 15px;
  }

  .unitInfo-tableTitle {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 25px;
    h2 {
      font-size: 16px;
      margin-bottom: 10px;
    }
    span {
      font-size: 16px;
      font-weight: bold;
    }
    p {
      font-size: 16px;
      margin-top: 5px;
      font-weight: bold;
    }
  }

  .unitInfo-tableInfo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 500px;
    color: #606266;
  }

  .unitInfo-tableContent {
    width: 100%;
    height: 500px;
    overflow: auto;
    .table-titles {
      margin-bottom: 15px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      span {
        margin-right: 200px;
      }
    }
    table {
      color: #606266;
      border: 1px solid #ebeef5;
      td {
        padding: 6px 0px;
      }
      tr.table-row {
        height: 45px;
      }
    }
  }

  .table-footers {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    .tableFooter-row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 25px;
      .tableFooter-col {
        flex: 1;
      }
    }
  }

  .table-button {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  a.downLoad {
    display: inline-block;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 18px;
    color: #1E88C7;
    text-indent: 0;
    font-size: 14px;
    line-height: 20px;
    margin-left: 20px;
  }
</style>